const dialogDrag = {
  install(Vue) {
    Vue.directive('dialogDrag', {
      bind(el, binding, vnode) {
        const dialog = el.querySelector('.el-dialog')
        const dialogHeader = el.querySelector('.el-dialog__header')
        const style = dialog.currentStyle || window.getComputedStyle(dialog, null)

        dialogHeader.style.cursor = 'move'
        dialogHeader.onmousedown = (e) => {
          const disX = e.clientX - dialogHeader.offsetLeft
          const disY = e.clientY - dialogHeader.offsetTop
          let styL, styT
          if (style.left.includes('%')) {
            styL = +document.body.clientWidth * (+style.left.replace(/\%/g, '') / 100)
            styT = +document.body.clientHeight * (+style.top.replace(/\%/g, '') / 100)
          } else {
            styL = +style.left.replace(/\px/g, '')
            styT = +style.top.replace(/\px/g, '')
          }
          document.onmousemove = (e) => {
            const l = e.clientX - disX
            const t = e.clientY - disY

            dialog.style.left = `${l + styL}px`
            dialog.style.top = `${t + styT}px`
          }
          document.onmouseup = () => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    })
  }
}
export default dialogDrag
